<template>
	<div class="monitor-service-container">
		<el-card shadow="hover">
			<el-table ref="tableServiceRef" :data="tableData.data" style="width: 100%" row-key="id">
				<el-table-column type="index" align="cneter" width="50" show-overflow-tooltip></el-table-column>
				<el-table-column label="服务名称" prop="serviceId" min-width="200" show-overflow-tooltip>
					<template #default="scope">
						<el-link type="primary" :underline="false" @click="onOpenServiceDashboard(scope.row)">{{scope.row.serviceId}}</el-link>
					</template>
				</el-table-column>
				<el-table-column label="注册方式" show-overflow-tooltip min-width="100" align="center">
					<template #default="scope">
						<span v-if="scope.row.secure">HTTPS</span>
						<span v-else>HTTP</span>
					</template>
				</el-table-column>
				<el-table-column label="主机地址" prop="host" min-width="150" show-overflow-tooltip></el-table-column>
				<el-table-column label="端口" prop="port" min-width="100" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column label="权重" min-width="100" align="center" show-overflow-tooltip>
					<template #default="scope">
						<span>{{scope.row.metadata['nacos.weight']}}</span>
					</template>
				</el-table-column>
				<el-table-column label="状态" show-overflow-tooltip min-width="100" align="center">
					<template #default="scope">
						<span v-if="scope.row.metadata['nacos.healthy'] == 'true'" class="color-success">UP 正常</span>
						<span v-else class="color-danger">DOWN 异常</span>
					</template>
				</el-table-column>
				<el-table-column label="元数据" min-width="300" show-overflow-tooltip>
					<template #default="scope">
						<JsonViewer v-if="scope.row.metadata" :value="scope.row.metadata" :expand-depth="0"></JsonViewer>
					</template>
				</el-table-column>
				<!-- <el-table-column label="实例名称" prop="scheme" show-overflow-tooltip></el-table-column> -->
				<!-- <el-table-column label="实例标识" prop="instanceId" show-overflow-tooltip></el-table-column> -->
				<el-table-column label="操作" show-overflow-tooltip width="100">
					<template #default="scope">
						<el-button type="primary" link @click="onOpenServiceDashboard(scope.row)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import md5 from 'js-md5';
import { getServiceList } from '/@/api/monitor/service/index';
import JsonViewer from 'vue-json-viewer';

export default {
	name: 'service',
	components: { JsonViewer },
	setup() {
		const tableServiceRef = ref();
		const router = useRouter();
		const state = reactive({
			search:{
				
			},
			tableData: {
				data: [],
				total: 0,
				loading: false
			}
		});

		const loadTableData = () => {
			getServiceList().then((res) => {
				if(res.code == 0){
					state.tableData.data = res.data;
					state.tableData.total = res.total;
				}
			});
		}
		
		const onOpenServiceDashboard = (row: object) => {
			router.push({
				path: '/service/dashboard',
				query: { 
					tagsViewName: row.serviceId + ' 仪表盘',
					hashKey: md5(row.serviceId + row.host + row.port),
					t: new Date().getTime() 
				}
			});
		};

		// 页面加载时
		onMounted(() => {
			loadTableData();
		});
		return {
			tableServiceRef,
			onOpenServiceDashboard,
			...toRefs(state),
		};
	},
};
</script>
<style scoped lang="scss">
	.monitor-service-container{
		:deep .jv-container {
			background: none;
			.jv-code{
				padding: 0 15px !important;
			}
		}
	}
</style>